<template>
	<div>
		<view class="wrap-order-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item" @click="onDetail(item)">
					<view class="item-one flex align-center just-between">
						<view class="order-num f-26"> 订单编号：{{ item.order_sn }} </view>

						<view class="status f-26">{{ item.status_text }}</view>
					</view>

					<view class="item-info flex align-center just-between">
						<image class="file" :src="item.goods.service_cover" />

						<view class="info-right">
							<view class="title fBold f-30 limit-num-line">
								{{ item.goods.service_name }}
							</view>

							<view class="people f-26"> 服务师: {{ item.technician.name }} </view>

							<view class="time f-26"> 预约时间：{{ item.strattime_text }} </view>

							<view class="service-time f-26 flex align-center just-between">
								服务时长：{{ item.time_long }}分钟
							</view>
						</view>

						<view class="num f-26"> x{{ item.goods.num }} </view>
					</view>

					<view class="item-bottom flex align-center just-between">
						<view class="total-price">
							<text>总计:</text>
							<text class="price"> ¥{{ item.total_price }} </text>
						</view>

						<view class="btn-bg">
							<orderBtn :dataInfo="item" @onRefresh="onRefresh" />
						</view>
					</view>
				</view>
			</block>
		</view>

		<uEmpty v-if="list.length === 0" />
	</div>
</template>

<script>
	import orderBtn from "./orderBtn.vue";
	export default {
		components: {
			orderBtn,
		},
		props: {
			/**
			 * 用户状态 1:普通用户 2:技师
			 */
			userStatus: {
				type: Number,
				default: 1,
			},
			/**
			 * 列表
			 */
			list: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {};
		},
		methods: {
			/**
			 * 刷新
			 */
			onRefresh() {
				this.$emit("onRefresh");
			},
			/**
			 * 订单详情
			 */
			onDetail(item) {
				uni.navigateTo({
					url: `/subPages/order/orderDetail?id=${item.id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-list {
		--limit-num: 1;
		padding: 20rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;

		.item {
			width: 100%;
			background-color: white;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.item-one {
				width: 100%;
				height: 86rpx;
				border-bottom: 2rpx solid $separa-color;

				.order-num {
					color: $title-color;
				}
				.status {
					color: $theme-color;
				}
			}

			.item-info {
				padding: 30rpx 0;
				width: 100%;
				overflow: hidden;

				.file {
					width: 176rpx;
					height: 176rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}

				.info-right {
					margin-left: 20rpx;
					margin-right: 20rpx;
					flex: 1;
					overflow: hidden;

					.title {
						color: $title-color;
					}
					.people {
						margin-top: 15rpx;
						color: #a3a3a3;
					}
					.time {
						margin-top: 15rpx;
						color: #a3a3a3;
					}
					.service-time {
						margin-top: 15rpx;
						color: #a3a3a3;
					}
				}
				.num {
					color: $title-color;
				}
			}

			.item-bottom {
				width: 100%;
				height: 90rpx;
				border-top: 2rpx solid $separa-color;

				.total-price {
					color: $title-color;

					.price {
						margin-left: 10rpx;
						color: $price-color;
					}
				}

				.btn-bg {
					margin-left: 10rpx;
					flex: 1;
					overflow: hidden;
				}
			}
		}
	}
</style>
